<!DOCTYPE html>
<!--
An example web page that creates and displays a custom Google Maps API Map Type
for Earth Engine map tiles.  See Google Maps documentation on Custom Map Types
for details.
-->
<html>
  <head>
    <title>SRTM</title>
    <script type="text/javascript"
      src="https://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      /**
      * This page will be called from a Python script in App Engine that uses
      * Jinja templates to pass information from the script to the web page.
      * Here we get the mapid and token for the map tiles that were generated
      * by Earth Engine using the Python script ee_appengine.py.
      */

      var MAPID = "{{ mapid }}";
      var TOKEN = "{{ token }}";

      /**
      * The Google Maps API calls getTileUrl when it tries to display a maps
      * tile.  This is a good place to swap in the mapid and token we got from
      * the Python script. The other values describe other properties of the
      * custom map type.
      */
      var eeMapOptions = {
        getTileUrl: function(tile, zoom) {
          var url = ['https://earthengine.googleapis.com/map',
                     MAPID, zoom, tile.x, tile.y].join("/");
          url += '?token=' + TOKEN
          return url;
        },
        tileSize: new google.maps.Size(256, 256),
        maxZoom: 9,
        minZoom: 0,
        name: "SRTM"
      };

      // Create the map type.
      var mapType = new google.maps.ImageMapType(eeMapOptions);

      // Initialize the Google Map and set the controls appropriately.
      function initialize() {
        var myLatLng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = {
          center: myLatLng,
          zoom: 8,
          streetViewControl: false,
          mapTypeControlOptions: {
            mapTypeIds: ["SRTM", google.maps.MapTypeId.ROADMAP,
                        google.maps.MapTypeId.SATELLITE]
          }
        };

        var map = new google.maps.Map(document.getElementById("map"),
                                      mapOptions);
        map.mapTypes.set("SRTM", mapType);
        map.setMapTypeId("SRTM");
      }

      window.onload = initialize;
    </script>
  </head>
  <body>
    <div id="map" style="width: 640px; height: 480px;"></div>
  </body>
</html>
